<template>
  <div class="error-handler-demo">
    <h3>错误处理演示</h3>
    <el-button type="primary" @click="testSuccessRequest">发送成功请求</el-button>
    <el-button type="danger" @click="testErrorRequest">发送错误请求</el-button>
    <el-button type="warning" @click="testCustomErrorRequest">发送自定义错误请求</el-button>
    
    <div v-if="result" class="result-box">
      <h4>响应结果：</h4>
      <pre>{{ result }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import request from '../utils/request'

const result = ref<any>(null)

// 测试成功请求
const testSuccessRequest = async () => {
  try {
    // 这里使用一个模拟的成功请求
    const res = await request.get('/demo/success')
    result.value = res
  } catch (error: any) {
    // 这里不会执行，因为我们已经在request.ts中处理了错误
    console.error('请求错误:', error)
  }
}

// 测试错误请求
const testErrorRequest = async () => {
  try {
    // 这里使用一个模拟的失败请求
    const res = await request.get('/demo/error')
    result.value = res
  } catch (error: any) {
    // 错误已在拦截器中处理并显示，这里只更新结果展示
    result.value = {
      error: true,
      message: error.message
    }
  }
}

// 测试自定义错误消息请求
const testCustomErrorRequest = async () => {
  try {
    // 这里使用一个模拟的带有自定义错误消息的请求
    const res = await request.post('/demo/custom-error', {
      data: '测试数据'
    })
    result.value = res
  } catch (error: any) {
    // 错误已在拦截器中处理并显示，这里只更新结果展示
    result.value = {
      error: true,
      message: error.message
    }
  }
}
</script>

<style scoped>
.error-handler-demo {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin: 20px;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.result-box {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  max-height: 300px;
  overflow: auto;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style> 